<template>
  <div class="statistics">
    <!-- 顶部 -->
    <div class="header flex">
      <div class="left flex">
        <div class="partment-wrap">
          <div class="selecte-section flex">
            <div class="selecte-wrap flex">
              <img src="@/assets/images/partment.png" alt class="partment-icon" />
              <div class="selecte-title">行政部门</div>
              <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
            </div>
          </div>
        </div>
        <div class="date-piker-wrap">
          <div class="selecte-section flex">
            <div class="selecte-wrap flex">
              <DatePicker type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
            </div>
          </div>
        </div>
      </div>
      <Button type="success">更新统计结果</Button>
    </div>

    <!-- 简略信息 -->
    <div class="simple-info-section flex">
      <div class="simple-1 simple-info-item">
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
      </div>
      <div class="simple-2 simple-info-item">
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
      </div>
      <div class="simple-3 simple-info-item">
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
      </div>
      <div class="simple-4 simple-info-item">
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
        <div class="inner">
          <div class="title">在职人数</div>
          <div class="count">
            <span class="num">1</span>
            <span class="unit">人</span>
          </div>
          <div class="desc">
            <span class="desc-text">上月</span>
            <span class="red-num">0人</span>
          </div>
        </div>
      </div>
    </div>

    <!-- chart 表格 -->
    <div class="chart-section">
        <div class="chart-wrap">
            <div class="chart-box">
                <div class="header">
                    <div class="left">
                        <span class="title">各部门在职人数</span>
                        </div> 
                    <div class="right">
                        <ul class="tools"></ul>
                    </div>
                </div>
                <div id="main"></div>
            </div>
        </div>
        <div class="chart-wrap">
            <div class="chart-box">
                <div class="header">
                    <div class="left">
                        <span class="title">各部门在职人数</span>
                        </div> 
                    <div class="right">
                        <ul class="tools"></ul>
                    </div>
                </div>
                <div id="main"></div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    name:"statistics",
    data(){
        return {
          
        }
    },
    
     mounted(){
    this.drawChart();
  },
  methods: {
    drawChart(){
        // 基于准备好的dom，初始化echarts实例
         
        let chart = this.$echarts.init(document.getElementById('main'),"color2")
       
     
      
        // 绘制图表
        chart.setOption({
            title: { text: '111' },
            tooltip: {},
            xAxis: {
                data: ["1","2","3","4","5","6"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>
<style lang="scss" src="./index.scss">
</style>